<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <title>个人信息编辑</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h1 {
            color: #333;
        }

        form {
            max-width: 500px;
            margin: 150px auto;
            padding: 30px 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 8px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="number"],
        textarea,
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }

        input[type="file"] {
            margin-top: 5px;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        button {
            width: 440px;
            height: 50px;
            color: white;
            background-color: green;
            border: none;
            border-radius: 10px;
        }
    </style>
    <link rel="stylesheet" href="css/conmmon.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo2.jpg" alt="">
    <span class="title">博客系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="blog_list.html">主页</a>
    <a href="myblog_list.html">我的博客</a>
    <!--    <a href="login.html">登陆</a>-->
    <a href="javascript:logout()">注销</a>
</div>
<form id="profileForm" enctype="multipart/form-data">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br>

    <label for="introduction">介绍:</label>
    <textarea id="introduction" name="introduction"></textarea><br>

    <label for="age">年龄:</label>
    <input type="number" id="age" name="age"><br>

    <label for="address">地址:</label>
    <input type="text" id="address" name="address">

    <div class="row">
        <button id="submit" onclick="updateUserInfo()">更新资料</button>
        <br>
    </div>
    <br>
    <label for="avatar">头像:</label>
    <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>
    <div class="row">
        <button id="uploadphoto" onclick="uploadPhoto()">上传头像</button>
    </div>
</form>

<script>
    function showInfo() {
        jQuery.ajax({
            url: "/user/showinfo",
            type: "POST",
            data: {},
            success: function (result) {
                if (result != null && result.code == 200) {
                    jQuery("#username").val(result.data.username);
                    jQuery("#introduction").val(result.data.introduction);
                    jQuery("#age").val(result.data.age);
                    jQuery("#address").val(result.data.address);
                } else {
                    alert("个人信息加载失败，请刷新~")
                }
            }
        });
    }

    showInfo();

    function uploadPhoto() {
        if (jQuery("#photo").val() == "") {
            alert("请选择头像~");
            return;
        }
        var fd = new FormData(document.querySelector("#profileForm"));
        fd.append("photo", jQuery("#photo").val());
        jQuery.ajax({
            url: "/user/uploadphoto",
            type: "POST",
            data: fd,
            contentType: false,
            processData: false,
            success: function (result) {
                if (result != null && result.code == 200) {
                    //刷新网页
                    alert("头像修改成功!");
                    location.href = "myblog_list.html";
                } else {
                    alert("头像上传失败，请稍后重试！");
                }
            }
        });
    }

    function updateUserInfo() {
        var username = jQuery("#username");
        var introduction = jQuery("#introduction");
        var age = jQuery("#age");
        var address = jQuery("#address");
        jQuery.ajax({
            url: "/user/update",
            type: "POST",
            data: {
                "username": username.val(),
                "introduction": introduction.val(),
                "age": age.val(),
                "address": address.val()
            },
            success: function (result) {
                if (result != null && result.code == 200) {
                    if (confirm("个人信息更新成功,是否跳转~"))
                        location.href = "myblog_list.html";
                } else {
                    alert("个人信息更新失败，请刷新~")
                }
            }
        });
    }

</script>
</body>
</html>